import style from "./Message.module.less"
import Icon from "../components/Icon"
import getComputerRootDom from "./getComputerRootDom.js";
/* 主要参数
1.content:{String} 默认值=“ ”  弹框展示的文本
2.type ： {Sting} 默认值="info" type=[info:普通，warn：警告，success：成功，error：错误]
3.durtion：持续时间 弹框停顿时间 
4.container：容器 保存弹框的容器
5.callback：回调函数 为了完成后要做什么事情
js写弹出框，
难点 
1.dom的获取 ref解决了 。
2.组件在js中渲染出真实dom getComputerRootDom()解决这个问题。注意语言，porps写错了导致一直获取不到type获取不到真实dom用到了$el属性返回的是真实dom，当然需要挂载
3.class的选择，模块化尽量都分个个模块这样更容易解决呀评价module，
6.多测试，不然抄代码不知哪里抄错了，
想法大于一些，就比如重排，样式用到居中定位，就必须带着transfrom所有的不然后面会覆盖前面，写好上升样式加上过度，利用获取宽度进行重排
然后再利用定时器进行上升消失，最后删除原素，删除原素要在计时器里面这样就需要transitionend事件，他会等到过度结束之后触发，有一个不理解的知识
注册事件的第三个参数。用对象来写了一个once：true，once就是true时前面的函数就只触发一次，但是第三个参数我真的不知道，
getComputedStyle 最终样式，也就是计算后包括内联还有写的都能获取到
position：static 就是静态定位，就是没有定位一样
opacity：透明*/
export default function(options = {}) { //函数参数是一个对象options
    const content = options.content || ""; //设置参数默认值，
    const type = options.type || "info";
    const durtion = options.durtion || 1000;
    const container = options.container || document.body;
    const callback = options.callback;
    const div = document.createElement('div'); //创建原素div
    const Ic = getComputerRootDom(Icon, { type, }) //获取icon组件创建真实dom
        // console.log(Ic);
    div.innerHTML += `<span class='${style.icon}'>${Ic.outerHTML}</span>
        <div>${content}</div>`; //设置div的html
    const typeback = style[`message-${type}`]; //根据不同的type设置不同的class，背景，icon图标
    div.className = ` ${style.message} ${typeback}`; //添加class类。两个巧妙地用到了字符串模板

    if (options.container) { //如果body成为父容器但是加上relative，就会不显示，高度为零；
        if (getComputedStyle(container).position === 'static') { //判断父元素是不是定位原素
            container.style.position = 'relative'; //不是就改为是
        }
    }


    container.appendChild(div); //吧写好的div放入容器中
    div.clientHeight; //获取宽度使其重排 clientHeight是获取原素的内边距加内容不包括边框外边距
    div.style.opacity = 1; //设置1为不透明显示
    div.style.transform = 'translate(-50%,-50%)'; //去掉了往下移动的部分，变相成为上升过度
    setTimeout(() => { //定时器
        div.style.opacity = 0; //0为透明
        div.style.transform = 'translate(-50%,-50%) translateY(-25px)'; //设置原素升高25像素
        div.addEventListener("transitionend", function() { //注册事件，transitionend是等过度完成后触发
                div.remove(); //清楚div
                callback && options.callback(); //callback有值就运行callback
            }, { once: true }) //第三个参数，once：true只触发一次这个函数
    }, durtion); //定时器第二个参数，是时间


}